'use client';

import React from 'react';
import { Form, Input, Select } from 'antd';
import type { FormInstance } from 'antd/es/form';
import { UserInfo } from '@/types/user';

interface UserProfileFormProps {
  form: FormInstance;
  mode: 'edit' | 'view';
  initialValues: Partial<UserInfo>;
  onSubmit: (values: Record<string, unknown>) => Promise<void>;
}

const UserProfileForm: React.FC<UserProfileFormProps> = ({
  form,
  mode,
  initialValues,
  onSubmit,
}) => {
  const readonly = mode === 'view';

  return (
    <Form
      form={form}
      layout="vertical"
      initialValues={initialValues}
      onFinish={onSubmit}
    >
      <Form.Item
        label="手机号"
        name="phone"
        rules={[{ required: true, message: '请输入手机号' }]}
      >
        <Input disabled={readonly} placeholder="请输入手机号" />
      </Form.Item>

      <Form.Item
        label="邮箱"
        name="email"
        rules={[
          { required: true, message: '请输入邮箱' },
          { type: 'email', message: '请输入有效的邮箱地址' }
        ]}
      >
        <Input disabled={readonly} placeholder="请输入邮箱" />
      </Form.Item>

      <Form.Item
        label="真实姓名"
        name="realName"
        rules={[{ required: true, message: '请输入真实姓名' }]}
      >
        <Input disabled={readonly} placeholder="请输入真实姓名" />
      </Form.Item>

      <Form.Item
        label="所属团队"
        name="teamName"
      >
        <Input disabled={readonly} placeholder="请输入所属团队" />
      </Form.Item>

      <Form.Item
        label="备注"
        name="remark"
      >
        <Input.TextArea 
          disabled={readonly} 
          placeholder="请输入备注信息"
          rows={4}
        />
      </Form.Item>
    </Form>
  );
};

export default UserProfileForm; 